import React, { useRef, useState } from "react";
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CFormCheck,
  CFormInput,
  CFormLabel,
  CFormTextarea,
  CInputGroup,
  CRow,
} from "@coreui/react";
import { useDispatch } from "react-redux";

const useFormChecker = (label) => {
  const [checked, setChecked] = useState(false);
  const component = (
    <CFormCheck
      inline
      label={label}
      checked={checked}
      onChange={(e) => {
        setChecked(e.target.checked);
      }}
    />
  );
  return [component, checked];
};

const createClass = () => {
  const [theClassName, setTheClassName] = useState("");
  const [classSummary, setClassSummary] = useState("");

  const [isUsingRobotChecker, isUsingRobot] = useFormChecker("启用课堂机器人");
  const [isUsingHeatMapChecker, isUsingHeatMap] =
    useFormChecker("启用疑难高能图");
  const [isUsingTimeMachineChecker, isUsingTimeMachine] =
    useFormChecker("启用时光机");

  const dispatch = useDispatch();

  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4">
          <CCardHeader>课堂基本信息</CCardHeader>
          <CCardBody>
            {/* 课堂名称 */}
            <CFormLabel htmlFor="basic-url">课堂名称</CFormLabel>
            <CInputGroup className="mb-3">
              <CFormInput
                value={theClassName}
                onChange={(e) => {
                  setTheClassName(e.target.value);
                }}
              />
            </CInputGroup>

            {/* 课堂概要 */}
            <CFormLabel htmlFor="basic-url">课堂概要</CFormLabel>
            <CInputGroup className="mb-3">
              <CFormTextarea
                value={classSummary}
                placeholder="如果你使用课堂机器人 你对课堂的描述可以帮助课堂机器人加深对课堂的理解 以此增强他们对课堂的优化程度"
                onChange={(e) => {
                  setClassSummary(e.target.value);
                }}
              ></CFormTextarea>
            </CInputGroup>

            <CInputGroup className="mb-3">
              {/* <UseRobotChecker /> */}
              {isUsingRobotChecker}
              {isUsingHeatMapChecker}
              {isUsingTimeMachineChecker}
            </CInputGroup>
            <CButton
              style={{
                width: 100,
              }}
              color="light"
              onClick={() => {
                dispatch({ type: "set", whiteBoardMode: true });
              }}
            >
              创建课堂
            </CButton>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  );
};

export default createClass;
